<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="panelbar">
        <title>Overview | Kendo UI PanelBar</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to initialize the Kendo UI PanelBar widget and configure its behaviors.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/navigation/panelbar/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/navigation/panelbar/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="panelbar-overview"><a href="#panelbar-overview">PanelBar Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/panelbar/index">Kendo UI PanelBar widget</a> displays hierarchical data as a multi-level, expandable widget.</p>

<p>Regarding its structure, you can apply either of the approaches:  </p>

<ul>
<li>Define it in HTML.</li>
<li>Dynamically configure it through the API of the PanelBar.</li>
</ul>

<p>The content of the items can also be loaded through AJAX by specifying a content URL.</p>

<h2 id="initialization"><a href="#initialization">Initialization</a></h2>

<p>You can create a PanelBar in any of the following ways:</p>

<ul>
<li>Use HTML markup.</li>
<li>Use a JSON data object.</li>
<li>Use a dynamic data binding either to a local or a remote data source. This approach has been available as of the R1 2017 release and is suitable for larger data sets and for data that frequently changes.</li>
</ul>

<blockquote>
<p><strong>Important</strong></p>

<p>As PanelBar should be initialized after the DOM is fully loaded, make sure you create it within a <code>$(document).ready()</code> statement.</p>
</blockquote>

<h3 id="using-html-markup"><a href="#using-html-markup">Using HTML Markup</a></h3>

<p>You can create a Kendo UI PanelBar by targeting the root element of an HTML list. The widget utilizes this list to define its structure and content.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;
        Item 1
            &lt;ul&gt;
                &lt;li&gt;Sub Item 1&lt;/li&gt;
                &lt;li&gt;Sub Item 2&lt;/li&gt;
            &lt;/ul&gt;
    &lt;li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $(document).ready(function() {
        $("#panelbar").kendoPanelBar();
    });
&lt;/script&gt;
</code></pre>

<h3 id="using-json-data-objects"><a href="#using-json-data-objects">Using JSON Data Objects</a></h3>

<p>The following example demonstrates how to initialize a PanelBar by using a JSON data object.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="panelbar"&gt;&lt;/ul&gt;

&lt;script&gt;
  $("#panelbar").kendoPanelBar({
    dataSource: [
      {
        text: "Item 1",
        cssClass: "myClass",                            // (Optional) Add custom CSS class to the item, added 2012 Q3 SP1.
        url: "http://www.telerik.com/"                  // (Optional) Link URL if navigation is needed
        },
      {
        text: "&lt;b&gt;Item 2&lt;/b&gt;",
        encoded: false,                                 // Allows the use of HTML for item text
        content: "text"                                 // Content within an item
      },
      {
        text: "Item 3",
        contentUrl: "partialContent.html"               // Content URL to load within an item
      },
      {
        text: "Item 4",
        imageUrl: "http://www.telerik.com/test.jpg",    // (Optional) Item image URL
        expanded: true,                                 // Item is rendered expanded
        items: [{                                       // Sub-item collection
          text: "Sub Item 1"
        }, {
          text: "Sub Item 2"
        }]
      },
      {
        text: "Item 5",
        // item image sprite CSS class, optional
        spriteCssClass: "imageClass3"
      }
    ]
  });
&lt;/script&gt;
</code></pre>

<h3 id="using-data-binding-to-local-arrays"><a href="#using-data-binding-to-local-arrays">Using Data Binding to Local Arrays</a></h3>

<p>This approach has been available as of the R1 2017 release.</p>

<p>The following example demonstrates how to create a PanelBar and bind it to a local data source.</p>

<h6>Example</h6>

<pre><code>&lt;div id="panelBar"&gt;&lt;/div&gt;

&lt;script&gt;
$(document).ready(function() {
    $("#panelBar").kendoPanelBar({
        dataSource: [
            {
                text: "Item 1",
                expanded: true,
                items: [
                    { text: "Item 1.1" },
                    { text: "Item 1.2" }
                ]
            },
            { text: "Item 2" }
        ]
    })
});
&lt;/script&gt;
</code></pre>

<h3 id="using-data-binding-to-remote-services"><a href="#using-data-binding-to-remote-services">Using Data Binding to Remote Services</a></h3>

<p>This approach has been available as of the R1 2017 release.</p>

<p>The following example demonstrates how to create a PanelBar and bind it to a remote HierarchicalDataSource.</p>

<h6>Example</h6>

<pre><code>&lt;div id="panelBar"&gt;&lt;/div&gt;

&lt;script&gt;
$(document).ready(function() {
    $("#panelBar").kendoPanelBar({
        dataTextField: "FullName",
        dataSource: {
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Employees",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "EmployeeId",
                    hasChildren: "HasEmployees"
                }
            }
        }
    })
});
&lt;/script&gt;
</code></pre>

<p>For a complete reference on how to bind the PanelBar to different service end-points, refer to the API documentation on <a href="/api/framework/hierarchicaldatasource"><code>HierarchicalDataSource</code></a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-Item"><a href="#configuration-Item">Item Lists with Nested Content</a></h3>

<p>PanelBar items may contain nested content, including markup, within a <code>&lt;div&gt;</code> element. The text content located outside the nested content is used as a title of the item.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item with no content&lt;/li&gt;
    &lt;li&gt;Item with content
        &lt;div&gt;This is nested content of a PanelBar item.&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $(document).ready(function() {
        $("#panelbar").kendoPanelBar();
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Content"><a href="#configuration-Content">Content with AJAX</a></h3>

<p>The PanelBar provides built-in support for asynchronously loading content from remote URLs. These URLs should return HTML content that can be loaded in the PanelBar item content area. Content <code>&lt;div&gt;</code> elements should be empty for AJAX loading to work.</p>

<p>The following example demonstrates how to load a PanelBar item content asynchronously via AJAX.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="panelbar"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Sub Item 1&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;
        Item with Dynamic Content
        &lt;div&gt;&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $("#panelbar").kendoPanelBar({
        contentUrls:[
            null,
            null,
            "html-content-snippet.html"
        ]
    });
&lt;/script&gt;
</code></pre>

<p>When the PanelBar loads remote content via AJAX, the server response is cached in-memory so that subsequent expand/collapse actions do not trigger subsequent AJAX requests.</p>

<h3 id="configuration-PanelBar"><a href="#configuration-PanelBar">PanelBar Animations</a></h3>

<p>By default, a PanelBar uses animations to expand and reveal sub-items when an item header is clicked. These animations can be modified in configuration via the open and close animation properties. A PanelBar can also be configured to only allow one panel be opened at a time.</p>

<p>The following example demonstrates how to change the PanelBar animation and <code>expandMode</code> behavior.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="panelbar"&gt;&lt;/ul&gt;

&lt;script&gt;
    $("#panelBar").kendoPanelBar({
        animation: {
            open : { effects: "fadeIn" }
        },
        expandMode: "single"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Dynamic"><a href="#configuration-Dynamic">Dynamic Items</a></h3>

<p><a href="/api/javascript/ui/panelbar">The PanelBar API</a> provides methods for dynamically adding or removing PanelBar items.</p>

<p>To add items, provide the new item as a JSON object along with a reference item. A reference item is a target PanelBar item HTML element that already exists in the PanelBar. The reference item will be used to determine the placement in the hierarchy of the new item. Any valid jQuery selector can be used to obtain a reference to the target item.</p>

<p>For more information on configuring PanelBar items, see the <a href="http://demos.telerik.com/kendo-ui/panelbar/api">PanelBar API demos</a>.</p>

<p>The following example demonstrates how to add a new root PanelBar item.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="panelbar"&gt;&lt;/ul&gt;

&lt;script&gt;
    var panelBar = $("#panelbar").kendoPanelBar().data("kendoPanelBar");

    panelBar.insertAfter(
        { text: "New PanelBar Item" },
        panelBar.element.children("li:last")
    );
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dataItem"><a href="#configuration-dataItem">dataItem Manipulations</a></h3>

<p>As of the R1 2017 release, the <a href="/api/javascript/ui/panelbar">PanelBar API</a> has provided methods for you to dynamically manage the state of the items trough their <code>dataItems</code>.</p>

<p>To disable, expand, or select a certain PanelBar item, get a reference to its <code>dataItem</code> and use the desirable method.</p>

<p>The following example demonstrates how to use the <code>disable</code>, <code>expand</code>, and <code>select</code> methods.</p>

<h6>Example</h6>

<pre><code>&lt;div id="panelBar"&gt;&lt;/div&gt;
&lt;button id="btn1" class="k-button"&gt;Update Data Item&lt;/button&gt;   
&lt;script&gt;
 $(document).ready(function() {
        $("#panelBar").kendoPanelBar({
            dataSource: [
                {
                    text: "Item 1",
                    expanded: false,
                    items: [
                        { text: "Item 1.1" },
                        { text: "Item 1.2" }
                    ]
                },
                { text: "Item 2" }
            ]
        })
    $("#btn1").on('click', function(){
        var panelBar = $("#panelBar").data("kendoPanelBar");  
        var dataItem = panelBar.dataItem(".k-item:first"); // get reference to the first item
        dataItem.set("expanded", true); //set the item as expanded
        dataItem.set("enabled", false); //set the item as enabled
        //dataItem.set("selected", true);  set the item as selected
 })        
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Retry"><a href="#configuration-Retry">Retry of Data Binding</a></h3>

<p>As of the R1 2017 release, the PanelBar has provided an built-in functionality of attempting a retry. If the initial data binding fails and regardless of the reason for the failure, you are now prompted with a <code>Request failed.</code> message. To initiate a new data binding, use the <strong>Retry</strong> button.</p>

<p><strong>Figure 1: The Retry button of the PanelBar prompting you to re-initiate the data binding</strong></p>

<p><img src="/controls/navigation/panelbar/retry-request-failed.png" alt="PanelBar areas"></p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on the Kendo UI PanelBar:</p>

<ul>
<li><a href="/aspnet-mvc/helpers/panelbar/overview">Overview of the ASP.NET MVC HtmlHelper Extension for the PanelBar Widget</a></li>
<li><a href="/jsp/tags/panelbar/overview">Overview of the PanelBar JSP Tag</a></li>
<li><a href="/php/widgets/panelbar/overview">Overview of the PanelBar PHP Class</a></li>
<li><a href="/api/javascript/ui/panelbar">PanelBar JavaScript API Reference</a></li>
</ul>

<p>For how-to examples on the Kendo UI PanelBar widget, browse its <a href="/controls/navigation/panelbar/how-to/initiliaze-grid-in-panelbar"><strong>How To</strong> documentation folder</a>.</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

